import React, { useEffect } from "react";
import type { Dayjs } from "dayjs";
import { Card, Calendar, theme } from "antd";
import type { CalendarMode } from "antd/es/calendar/generateCalendar";
import {
  TeamOutlined,
  UsergroupAddOutlined,
  UserOutlined,
  UsergroupDeleteOutlined,
  FolderOpenOutlined,
  SettingOutlined,
  BranchesOutlined,
  NotificationOutlined,
  CarryOutOutlined,
  MailOutlined,
  InsuranceOutlined,
  FormOutlined,
  DashboardOutlined,
  FileSearchOutlined,
  FileDoneOutlined,
  FileOutlined,
  DesktopOutlined,
  DollarOutlined,
  CarOutlined,
} from "@ant-design/icons";
import * as echarts from "echarts";

import "../../../styles/HuangYuDong/ShouYe/WorkBench/WorkBench.scss";
import { index_hyd_Approved_quantity } from "../../../api/HuangYuDong";
const { Meta } = Card;
function WorkBench(props: any) {
  // 日历
  const { token } = theme.useToken();

  const onPanelChange = (value: Dayjs, mode: CalendarMode) => {
    console.log(value.format("YYYY-MM-DD"), mode);
  };

  const wrapperStyle = {
    width: 300,
    border: `1px solid ${token.colorBorderSecondary}`,
    borderRadius: token.borderRadiusLG,
  };

  // 生命周期
  useEffect(() => {
    index_hyd_Approved_quantity().then((ok) => {
      console.log(ok.data);
      if (ok.status === 200) {
        let data = ok.data.data;
        let xAxis = ok.data.xAxis;

        type EChartsOption = echarts.EChartsOption;

        var chartDom = document.getElementById("main")!;
        var myChart = echarts.init(chartDom);
        var option: EChartsOption;

        option = {
          title: {
            subtext: "各类型审批数量",
          },
          tooltip: {
            trigger: "axis",
          },
          legend: {
            data: ["审批数量"],
          },
          toolbox: {
            show: true,
            feature: {
              dataView: { show: true, readOnly: false },
              magicType: { show: true, type: ["line", "bar"] },
              restore: { show: true },
              saveAsImage: { show: true },
            },
          },
          calculable: true,
          xAxis: [
            {
              type: "category",
              // prettier-ignore
              data: xAxis,
            },
          ],
          yAxis: [
            {
              type: "value",
            },
          ],
          series: [
            {
              name: "审批数量",
              type: "bar",
              data: data,
            },
          ],
        };

        option && myChart.setOption(option);
      }
    });
  }, []);
  return (
    <div className="work_bench">
      <div className="center">
        <div className="yuangong_gaikuang">
          <h2>员工概况</h2>
          <ul>
            <li>
              <Card hoverable style={{ width: 180 }} cover={<TeamOutlined />}>
                <Meta title="10,000" description="在职员工" />
              </Card>
            </li>
            <li>
              <Card
                hoverable
                style={{ width: 180 }}
                cover={<UsergroupAddOutlined />}
              >
                <Meta title="80" description="待入职员工" />
              </Card>
            </li>
            <li>
              <Card
                hoverable
                style={{ width: 180 }}
                cover={<UsergroupDeleteOutlined />}
              >
                <Meta title="100" description="试用期员工" />
              </Card>
            </li>
            <li>
              <Card hoverable style={{ width: 180 }} cover={<UserOutlined />}>
                <Meta title="8905" description="正式员工" />
              </Card>
            </li>
            <li>
              <Card
                hoverable
                style={{ width: 180 }}
                cover={<UsergroupDeleteOutlined />}
              >
                <Meta title="44" description="待离职员工" />
              </Card>
            </li>
            <li>
              <Card hoverable style={{ width: 180 }} cover={<TeamOutlined />}>
                <Meta title="609" description="已离职员工" />
              </Card>
            </li>
          </ul>
        </div>
        <div className="zhong">
          <div className="kuaijie_rukou">
            <h2> 快捷入口</h2>
            <ul>
              <li>
                <BranchesOutlined />
                组织
              </li>
              <li>
                <TeamOutlined />
                员工
              </li>
              <li>
                <CarryOutOutlined />
                考勤
              </li>
              <li>
                <CarryOutOutlined />
                考勤
              </li>
              <li>
                <DollarOutlined />
                薪酬
              </li>
              <li>
                <InsuranceOutlined />
                社保公积金
              </li>
              <li>
                <FileDoneOutlined />
                绩效
              </li>
              <li>
                <NotificationOutlined />
                招聘
              </li>
              <li>
                <FormOutlined />
                审批
              </li>
              <li>
                <DesktopOutlined />
                会议室预定
              </li>
              <li>
                <CarOutlined />
                车辆
              </li>
              <li>
                <FileSearchOutlined />
                新闻
              </li>
              <li>
                <MailOutlined />
                公告
              </li>
              <li>
                <FileOutlined />
                合同库
              </li>
              <li>
                <FolderOpenOutlined />
                文档库
              </li>
              <li>
                <DollarOutlined />
                资产
              </li>
              <li>
                <DashboardOutlined />
                培训
              </li>
              <li>
                <SettingOutlined />
                系统设置
              </li>
            </ul>
          </div>
          <div style={wrapperStyle} className="richeng_daiban">
            <h2>日程待办</h2>
            <Calendar fullscreen={false} onPanelChange={onPanelChange} />
          </div>
          <div className="shenpi_qingkuang">
            <h2>审批概况</h2>
            <ul>
              <li>
                <Card title="890" bordered={false}>
                  全部审批
                </Card>
              </li>
              <li>
                <Card title="85" bordered={false}>
                  审批中
                </Card>
              </li>
              <li>
                <Card title="705" bordered={false}>
                  已完成
                </Card>
              </li>
              <li>
                <Card title="100" bordered={false}>
                  已取消
                </Card>
              </li>
            </ul>
            <div id="main"></div>
          </div>
        </div>
      </div>
    </div>
  );
}

export default WorkBench;
